<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fun"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--  <!DOCTYPE html> -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发钥匙</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<%--     <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
          <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css" rel="stylesheet"> --%>
    <script src="${pageContext.request.contextPath}/static/js/KeysManager/index.js"></script>
    <link href="${pageContext.request.contextPath}/static/plugins/layer_mobile/need/layer.css?v=092893" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/yahlj-app.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer_mobile/layer.js"></script>
    <link href="${pageContext.request.contextPath}/static/css/KeysManager/GiftKey.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/static/plugins/mobiscroll/mobiscroll.custom-2.16.1.min.css" rel="stylesheet">
    <script src="<%=request.getContextPath()%>/static/plugins/mobiscroll/mobiscroll.custom-2.16.1.min.js"></script>
    <style type="text/css">
    	.select2{
    		margin-left: 0.42553191rem;
			width: 10rem;
			float: left;
			background-color: #ffffff;
			border:0;
			  /*很关键：将默认的select选择框样式清除*/
		  	appearance:none;
		  	-moz-appearance:none;
		 	-webkit-appearance:none;
			height: 0.85106383rem;
		}
		
		.sect-span{
			width: 90%
		}
		    </style>
</head>
<body>
	    <div id="popBackground" class="popBackground" style="display: none;">
	    <!--  选择钥匙 -->
        <div class="sectDiv" id="sectDiv">
        	<%-- <c:forEach var="item" items="${datalist}" varStatus="status">
	            <div class="sect-item" data-id='${item.sid }'>
	                <input type="checkbox" name="checks" class="sect-checkbox" value='${item.sid }' data-name='${item.installLockName }' id="check_${item.sid }"><span  data-id='${item.sid }' class="sect-span">${item.installLockName }</span>
	            </div>
            </c:forEach>
            <c:if test="${fun:length(datalist) == 0}">
            	<div class="sect-item">
            		<span>没有可用的设备</span>
            	</div>	
            </c:if> --%>
            <div class="popHead">
            	选择钥匙
            </div>
            <ul class="popMain clearfix">
	            <c:forEach var="item" items="${datalist}" varStatus="status">
	            	<li data-id='${item.sid }'>${item.installLockName}</li>
	            </c:forEach>
            </ul>
            <div class="popBtn clearfix">
            	<span class="popCancel">取消</span>
                <span class="popSure">确定</span>
            </div>
         </div>
         
         <!--有效日期 -->
          <div class="popDate"> </div>                                                                            
    </div>




		<!-- 选择时间 -->
		<div class="mask"></div>
		<div class="choice_time" >
			<div class="choice_time_top">钥匙可用时段</div>
			<div class="choice_time_center">
				<div class="time_title">开始时间</div>
				<div class="time_all begin_time">
					<div class="yy_list_box">
						<div class="yy_list begin_y " style="box-sizing: border-box;">

						</div>
					</div>
					<div class="box_line_lf"></div>
					<div class="mm_list_box ">
						<div class="mm_list begin_m">
						</div>
					</div>
					<div class="box_line_rt"></div>
					<div class="dd_list_box ">
						<div class="dd_list begin_d">
						</div>
					</div>

				</div>
				<div class="time_title">结束时间</div>
				<div class="time_all end_time">
					<div class="yy_list_box">
						<div class="yy_list begin_y " style="box-sizing: border-box;">

						</div>
					</div>
					<div class="box_line_lf"></div>
					<div class="mm_list_box ">
						<div class="mm_list begin_m">
						</div>
					</div>
					<div class="box_line_rt"></div>
					<div class="dd_list_box ">
						<div class="dd_list begin_d">
						</div>
					</div>
				</div>
				<div class="marked_words">*选择可用时段后，点击确定钥匙可用时段</div>
			</div>
			<div class="choice_time_bottom clearfix">
				<div class="cancel">取消</div>
				<div class="sure">确定</div>
			</div>
		</div>






    <div class="content">
        <div class="item">
        	<div class="open_list">发钥匙</div>
        	<input onfocus="this.blur();"  type="text" class="edittext" placeholder="请选择钥匙" id='lockNames' value="${lockName}" <c:if test="${prolong=='1'}">readonly='readonly'</c:if> />
        </div>

        <div class="item">
        	<div class="open_list">有效时间</div>
			<input  onfocus="this.blur();" type="text" class="edittext" id="select-date" readonly="true" placeholder="请选择有效时间">
        </div>

        <div class="item">
        	<div class="open_list">手机号码</div> 


            <input type="text" class="edittext" id='tel' placeholder="请输入手机号" value="${tel}" <c:if test="${prolong=='1'}">readonly='readonly'</c:if>/>
            
        </div>

        <div class="item">
        	<div class="open_list">用户姓名</div> 

           <%--  <img class="icon" src="${pageContext.request.contextPath}/static/images/KeysManager/date.png"/> --%>

            <!--<label id="show-date" class="edittext" placeholder="2017/01/01" for="select-date"></label>-->

         <!--    <input type="date" name="select-date" class="select-date edittext" id="select-date"
                   value="" /> -->
              <input id="name" placeholder="请输入用户姓名" type="text" name="select-date" class="edittext" 
                   value="${auname}"  <c:if test="${prolong=='1'}">readonly='readonly'</c:if>/>
                   <!--style="display:block;background-color: white;width: 100px;height: 100px;color:white"-->

        </div>
    </div>

    <div class="foot">
        <button name="enter" id="submit" onclick="yes()">确定</button>
    </div>

</body>
</html>
<script>
var lockIds='${lockid}';
var lockNames=''
var prolongId='${prolongId}';
var prolong='${prolong}';
var endTime=null;
var startTime=null;

;(function(window, undefined){
	
	var i= $('.sect-item').length;
	
    var divH = $('.sect-item').height();
	
   /*  $("#sectDiv").css("height", (divH + 2) * (i+1)); */

    $('#lockNames').on("click", function(){
    	if(prolong!='1'){//处理申请延期的情况下不选择钥匙
    		$('#popBackground').show();	
    	}
    });
   $('.popSure').on("click", function(){
        $('#popBackground').hide();
       /*  clickBox(); */

    });
   $('.popCancel').on("click", function(){
       $('#popBackground').hide();
   });
    
    $('.sect-span').on("click", function(){
    	var dataid = $(this).attr("data-id");
    	 $("#check_"+dataid).prop("checked", !$("#check_"+dataid).prop("checked"));
    	 //clickBox();
    });
    
    
    /* 弹出时间 */
    $('#select-date').click(function(){
    	$('.mask').fadeIn('fast');
    	$('.choice_time').css('height','316px');
    	$('body').addClass('body_location');
    });
    $('.sure').click(function(){
    	$('.mask').fadeOut('fast');
    	$('.choice_time').css('height','0');
    });
    $('.cancel').click(function(){
        $('.mask').fadeOut('fast');
        $('.choice_time').css('height','0');
    });



    /* 发钥匙选 */ /*Created by 小暖 on 2017/7/17 17:11*/
       $('.popMain li').click(function(){
    	  var str=''; 
    	$(this).toggleClass('popChecked');
    	var len=$(".popChecked").length;
    	var arr=[];
    	lockIds='';
    	for(var x=0;x<len;x++){
    		var str=$(".popChecked").eq(x).text();
    		lockIds+=$(".popChecked").eq(x).attr("data-id")+",";
    		arr.push(str);
    	}
    	console.log(lockIds);
    	$('#lockNames').val(arr); 
    }); 



$("#popBackground").attr("style","display:none;");//隐藏div

$('#textSelect').on("click", function(){
    $('#popBackground').show();
});

$('input:checkbox').on("click", function(){
	
});

$("#popBackground").on("click", function(){
	
	//clickBox();
	
}); 
	
})(window);

 


function showMsg(content){
	layer.open({
	    content:content,
	    skin: 'msg',
	    time:2
	});
}

	
function yes(){
	try{
		var tel=$("#tel").val();
		var name=$("#name").val();
		//var lockNames=$("#lockNames").val();
		/* var lockid=arr; */
		var date=$("#select-date").val();
		if(!lockIds){
			showMsg('请选择钥匙');
			return;
		}
		if(!date){
			showMsg('请填写有效期');
			return;
		}
		if(!tel){
			showMsg('请填写电话');
			return;
		}
		if(!name){
			showMsg('请填写姓名');
			return;
		}
		
		
		$.ajax({   
		    url:'<%=request.getContextPath()%>/admin/tusers_authorizeKeys.action',   
		    type:'post',
		    data:"&pubId="+lockIds+"&validity="+formatDate(endTime)+'&startTime='+formatDateTime(startTime)+'&data='+tel+";"+name+"&prolong="+prolong+"&prolongId="+prolongId,   
		    async : true, //默认为true 异步   
		    dataType:'json',
		    error: function(XMLHttpRequest, textStatus, errorThrown) {
		    },  
		    success:function(result){   
		    	var data = result.data;
		       if(result.code=='1'){
		    	   showMsg(result.msg);
		    	   if(prolong=='1'){
		    		   locationReplace('${pageContext.request.contextPath}/admin/tkeys_listViewApp.action?shopw=2');
		    		   //window.history.back(-1);
		    	   }else{
		    		   setTimeout('window.location.reload()',2000);		    		   
		    	   }
		       }else{
		    	   showMsg(result.msg);
		       }
		    }
		});
	}catch (e) {
		console.log(e.message);
		/* showMsg(e.message); */
	}
	
	
}

function locationReplace(url){
	
	
	  if(history.replaceState){
	    history.replaceState(null, document.title, url);
	    history.go(0);
	  }else{
	    location.replace(url);
	  }
}


function no(){
	hljJs.closeWindow({
		success:function(res){
			console.log(res);		
		},
		fail:function(res){
			console.log(res);
		}
	});
}

function formatDateTime(inputTime) {
    var date = new Date(inputTime);  
    var y = date.getFullYear();    
    var m = date.getMonth() + 1;    
    m = m < 10 ? ('0' + m) : m;    
    var d = date.getDate();    
    d = d < 10 ? ('0' + d) : d;    
    var h = date.getHours();  
    h = h < 10 ? ('0' + h) : h;  
    var minute = date.getMinutes();  
    var second = date.getSeconds();  
    minute = minute < 10 ? ('0' + minute) : minute;    
    second = second < 10 ? ('0' + second) : second;   
    return y + '' + m + '' + d+''+h+''+minute+''+second;    
};  

function formatDate(inputTime) {
    var date = new Date(inputTime);  
    var y = date.getFullYear();    
    var m = date.getMonth() + 1;    
    m = m < 10 ? ('0' + m) : m;    
    var d = date.getDate();    
    d = d < 10 ? ('0' + d) : d;    
    var h = date.getHours();  
    h = h < 10 ? ('0' + h) : h;  
    var minute = date.getMinutes();  
    var second = date.getSeconds();  
    minute = minute < 10 ? ('0' + minute) : minute;    
    second = second < 10 ? ('0' + second) : second;   
    return y + '-' + m + '-' + d;    
};  
</script>
<script>
    //    年月日数据填充
    var data = new Date();
    var year=parseInt(data.getFullYear());
    var month=data.getMonth()+1;
    var day=data.getDate();
    for(var i=year-1;i<year+6;i++)
    {
        if(i==year){
            var begin_year='<div class="tooth change_big ">'+i+'</div>';
            $(".begin_y").append(begin_year)
        }else if(i==year-1){
            var begin_year='<div class="tooth change_big ">'+""+'</div>';
            $(".begin_y").append(begin_year)
        }else if(i==year+5){
            var begin_year='<div class="tooth change_big ">'+""+'</div>';
            $(".begin_y").append(begin_year)
        }
        else {
            var begin_year='<div class="tooth ">'+i+'</div>';
            $(".begin_y").append(begin_year)
        }
    }
    for(var m=0;m<=13;m++)
    {
        if(m==month){
            var begin_month='<div class="tooth change_big ">'+m+'</div>';
            $(".begin_m").append(begin_month);
        }else if(m==0){
            var begin_month='<div class="tooth change_big ">'+""+'</div>';
            $(".begin_m").append(begin_month);
        }else if(m==13){
            var begin_month='<div class="tooth change_big ">'+""+'</div>';
            $(".begin_m").append(begin_month);
        }else {
            var begin_month='<div class="tooth ">'+m+'</div>';
            $(".begin_m").append(begin_month);
        }
        $(".mm_list").scrollTop(month*17-17);

    }
    for(var d=0;d<=32;d++)
    {
        if(d==day){
            var begin_day='<div class="tooth change_big ">'+d+'</div>';
            $(".begin_d").append(begin_day);
        }else if(d==0){
            var begin_day='<div class="tooth change_big ">'+""+'</div>';
            $(".begin_d").append(begin_day);
        }else if(d==32){
            var begin_day='<div class="tooth change_big ">'+""+'</div>';
            $(".begin_d").append(begin_day);
        }else {
            var begin_day='<div class="tooth ">'+d+'</div>';
            $(".begin_d").append(begin_day);
        }
        $(".dd_list").scrollTop(day*17-17);

    }
    //    年月日数据填充end
    $(".yy_list").scroll(function() {
        var height=$(this).scrollTop()+17;
        var index=Math.round(height/17);
        $(this).children(".tooth").eq(index).siblings(".tooth").removeClass("change_big");
        $(this).children(".tooth").eq(index).addClass("change_big");
    });
    $(".mm_list").scroll(function() {
        var height=$(this).scrollTop()+17;
        var index=Math.round(height/17);
        $(this).children(".tooth").eq(index).addClass("change_big").siblings(".tooth").removeClass("change_big");
    });
    $(".dd_list").scroll(function() {
        var height=$(this).scrollTop()+17;
        var index=Math.round(height/17);
        $(this).children(".tooth").eq(index).addClass("change_big").siblings(".tooth").removeClass("change_big");
    });
    $('.sure').click(function(){
        //开始年月日
        var begin_year=parseInt($(".begin_time .yy_list_box").find(".change_big").text());
        var begin_month=parseInt($(".begin_time .mm_list_box").find(".change_big").text());
        var begin_day=parseInt($(".begin_time .dd_list_box").find(".change_big").text());
        var var_begin=new Date(begin_year,begin_month-1,begin_day).getTime();
        var begin = begin_year+"-"+checkTime(begin_month)+"-"+checkTime(begin_day);
        //结束年月日
        var end_year=parseInt($(".end_time .yy_list_box").find(".change_big").text());
        var end_month=parseInt($(".end_time .mm_list_box").find(".change_big").text());
        var end_day=parseInt($(".end_time .dd_list_box").find(".change_big").text());
        var var_end=new Date(end_year,end_month-1,end_day).getTime();
        var end = end_year+"-"+checkTime(end_month)+"-"+checkTime(end_day);
        console.log(var_begin);
        console.log(var_end);
        startTime=var_begin;
        endTime=var_end;
        if(var_end>=var_begin){
            $('.mask').fadeOut('fast');
            $('.choice_time').css('height','0');
            $("#select-date").val(begin + " 至 " + end)
        }else {
            alert("结束时间必须大于开始时间！");
        }


    });
    function checkTime(i){
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }




</script>
